<template>
  <view class="feedback-container">
    <view class="form-title">咨询建议留言</view>
    
    <view class="form-group">
      <text class="label">留言类别</text>
      <picker v-model="formData.type" :range="formDataList" @change="onTypeChange">
        <view class="picker">
          {{ formData.type || '请选择类别' }}
        </view>
      </picker>
    </view>
    
    <view class="form-group">
      <text class="label">联系人</text>
      <input 
        type="text" 
        v-model="formData.contactPerson" 
        placeholder="请输入联系人姓名"
        placeholder-class="input-placeholder"
      />
    </view>
    
    <view class="form-group">
      <text class="label">联系电话</text>
      <input 
        type="tel" 
        v-model="formData.phone" 
        placeholder="请输入联系电话"
        placeholder-class="input-placeholder"
      />
    </view>
    
    <view class="form-group">
      <text class="label">留言内容</text>
      <textarea 
        v-model="formData.content" 
        placeholder="请输入留言内容，不少于10个字符"
        placeholder-class="textarea-placeholder"
        maxlength="500"
        auto-height
      />
      <view class="char-count">{{ formData.content.length }}/500</view>
    </view>
    
    <view class="form-group">
      <text class="label">上传图片（选填）</text>
      <view class="image-upload">
        <view v-for="(image, index) in formData.images" :key="index" class="uploaded-image">
          <image :src="image" mode="aspectFill"></image>
          <view class="delete-btn" @click="removeImage(index)">×</view>
        </view>
        <view class="upload-btn" @click="chooseImage">
          <text>+</text>
        </view>
      </view>
    </view>
    
    <button class="submit-btn" :disabled="!isFormValid" @click="submitForm">
      提交留言
    </button>
	<view class="exit" @click="exit">
		<uni-icons type="clear"></uni-icons>
	    <text>退 出</text>	
		</view>
    
    <view class="success-tip" v-if="showSuccess">
      <text>留言提交成功！我们会尽快处理并与您联系。</text>
    </view>
  </view>
</template>

<script>
	const CloudDb=uniCloud.importObject('getDb')
export default {
	name:"sendMsg",
  data() {
    return {
      formData: {
        type: '',
        contactPerson: '',
        phone: '',
        content: '',
        images: [],
	    },
		formDataList:['找仓', '招货主', '投诉', '建议', '咨询'],
      showSuccess: false
    }
  },
  methods: {
    onTypeChange(e) {
      this.formData.type = this.formDataList[e.detail.value];
    },
    chooseImage() {
      const that = this;
      uni.chooseImage({
        count: 3 - this.formData.images.length,
        success(res) {
          that.formData.images = [...that.formData.images, ...res.tempFilePaths];
        }
      });
    },
    removeImage(index) {
      this.formData.images.splice(index, 1);
    },
    isFormValid() {
      return (
        this.formData.type &&
        this.formData.contactPerson &&
        /^1[3-9]\d{9}$/.test(this.formData.phone) &&
        this.formData.content.length >= 10
      );
    },
 async   submitForm() {
      if (!this.isFormValid()) {
        uni.showToast({
          title: '请完善表单信息',
          icon: 'none'
        });
        return;
      }
      uni.showLoading({
        title: '提交中...'
      });
    const form={
		type:this.formData.type,
		name:this.formData.contactPerson,
		telephone:this.formData.phone,
		content:this.formData.content,
		images:[]
	}  
     try{
		 const res=CloudDb.addDB('contact',form)
		 if(res.code){
			 this.showSuccess=true
			 setTimeout(()=>{
				this.$emit('close')
			 },3000)
			
		 
		 }
		
		 
	 }catch(e){
		 uni.showToast({
			 icon:'error',
		 	title:'提交失败'
		 },2000)
		 
	 }finally{
		 uni.hideLoading()
		    this.showSuccess = false;
	 }
  
    },
	exit(){
		this.$emit('close')
	}
  }
}
</script>

<style lang="scss">
.feedback-container {
  padding: 30rpx;
  background-color: #f8f8f8;
width: 750rpx;
  position: relative;
  
  .form-title {
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40rpx;
    color: #333;
  }
  
  .form-group {
    margin-bottom: 30rpx;
    
    .label {
      display: block;
      font-size: 28rpx;
      color: #666;
      margin-bottom: 15rpx;
    }
    
    input, .picker {
      height: 80rpx;
      line-height: 80rpx;
      width: 100%;
      background-color: #fff;
      border-radius: 12rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
      color: #333;
      box-sizing: border-box;
    }
    
    textarea {
      width: 100%;
      background-color: #fff;
      border-radius: 12rpx;
      padding: 20rpx;
      font-size: 28rpx;
      color: #333;
      box-sizing: border-box;
      min-height: 200rpx;
    }
    
    .char-count {
      text-align: right;
      font-size: 24rpx;
      color: #999;
      margin-top: 10rpx;
    }
    
    .image-upload {
      display: flex;
      flex-wrap: wrap;
      gap: 20rpx;
      
      .uploaded-image {
        width: 180rpx;
        height: 180rpx;
        position: relative;
        border-radius: 12rpx;
        overflow: hidden;
        
        image {
          width: 100%;
          height: 100%;
        }
        
        .delete-btn {
          position: absolute;
          top: 0;
          right: 0;
          width: 40rpx;
          height: 40rpx;
          background-color: rgba(0, 0, 0, 0.6);
          color: #fff;
          text-align: center;
          line-height: 40rpx;
          font-size: 28rpx;
        }
      }
      
      .upload-btn {
        width: 180rpx;
        height: 180rpx;
        border: 2rpx dashed #ddd;
        border-radius: 12rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 48rpx;
        color: #ddd;
      }
    }
  }
  
  .submit-btn {
    margin-top: 40rpx;
    height: 90rpx;
    line-height: 90rpx;
    background-color: #1677ff;
    color: #fff;
    font-size: 32rpx;
    border-radius: 45rpx;
    width: 100%;
    border: none;
    opacity: 0.6;
    
    &:not(:disabled) {
      opacity: 1;
    }
  }
  
  .success-tip {
    margin-top: 30rpx;
    padding: 20rpx;
    background-color: #f0f9eb;
    color: #52c41a;
    border-radius: 12rpx;
    text-align: center;
    font-size: 28rpx;
  }
.exit {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  padding: 10rpx 18rpx;
  border-radius: 8rpx;
  border: 1rpx solid #666; /* 修复了border属性的写法 */
  background-color: #fff; /* 添加了背景色 */
  color: #333; /* 添加了文字颜色 */
  font-size: 28rpx; /* 添加了字体大小 */
  text-align: center; /* 文本居中 */
  line-height: 1; /* 行高 */
  z-index: 1000; /* 添加了层级 */
  box-sizing: border-box; /* 修复盒模型问题 */
}
  .input-placeholder, .textarea-placeholder {
    color: #ccc;
  }
}
</style>  